<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--  引入vue.js-->
    <script src="js/vue.js"></script>
<!--    引入axios.js-->
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="app">
        路径参数(key=value&...)：<br>
        name:<input type="text" v-model="user.name"> <br>
        password:<input type="password" v-model="user.password"> <br>

        <hr>
        请求体参数(json)：<br>
        name1:<input type="text" v-model="user1.name"> <br>
        password1:<input type="password" v-model="user1.name"> <br>

        <br>
        <button @click="send()">提交</button>
    </div>
</body>

<script>

    new Vue({
        el:"#app",
        //定义数据模型
        data:{
            user:{
                name:"",
                password:""
            },
            user1:{
                name:"",
                password:""
            }
        },
        //定义vue对象的行为
        methods:{
            send(){
                //通过axios发送异步请求
                axios({
                    //请求路径
                    url:"/user/axios",
                    //请求方式
                    method:"post",
                    //路径参数-- key=value&key2=value2...
                    params:this.user,
                    //请求体json格式参数
                    data:this.user1,
                    //携带请求头
                    headers:{
                        myheader:"hello vue axios"
                    }
                }).then(resp=>{
                    let data = resp.data;
                    alert(data)
                })
            }
        },
        //监听机制，监听指定属性的变化（一旦属性发生值的改变，我们实现写好的监听回调方法会执行）
        watch:{

        },
        //计算属性：本质还是一个属性，只不过这个属性的值需要通过业务运算获取，而且我们只需要运算一次
        computed:{

        },

        //Vue对象创建完成，但是和页面元素没有任何关系的阶段
        created(){
        },

        //Vueu对象中的数据和页面元素完成绑定完成后的阶段
        mounted(){
        }
    });

</script>

</html>